import React, { Component } from 'react'

export class App extends Component {
  constructor() {
    super()
    this.state = {
      message: 'Hello World!',
      count : 100
    }
  }
  changeText = () => {
    // setState的三种用法
    // 1.普通用法： 通过对象的形式修改state的值；
    // 拿着setState({ message: '你好！世界' })的对象和state对象{ message: 'Hello World!', count:100}浅层合并到state中
    // this.setState({
    //   message: '你好！世界'
    // })

    // 2.传递一个回调函数
    // 好处一：可以在回调函数中编写新的state逻辑
    // 好处二：当前的回调函数会将之前的state和props传递进来
    // this.setState((state,props) => {
    //   console.log(state.message,props); // state: 修改前的state对象,{message: 'Hello World!', count: 100}; props同理
    //   return { message: '你好！世界' }
    // })

    // 3.setState是异步执行 为什么是异步？ https://github.com/facebook/react/issues/11527#issuecomment-360199710;
    // 调用 setState 时 不会 更改已执行代码中当前的 state
    // 它只影响从 下一个 渲染开始返回的 this.state。
    // 如何拿到更新后的state呢？  
    // setState可以接收两个参数，第二个参数是回调函数，可以在回调中拿到更新后的state setState(state, callback)
    this.setState({ message: '你好！世界' }, () => {
      console.log(this.state,'---');
    })
    console.log(this.state.message); // Hello World!
  }
  render() {
    const {message,count} = this.state
    return (
      <div>
        <h3 >{message}</h3>
        <button onClick={this.changeText}>修改文本</button>
        <h3>count: {count}</h3>
        <button>count +1</button>
      </div>
    )
  }
}

export default App